<script setup>
    import { zzLogin } from '@/common/apis'
    import { useRouter } from 'vue-router'
    import { ElMessage } from 'element-plus'

    const router = useRouter()
    
    let form = $ref({})

    let btnLoading = $ref(false)

    // 登录
    const submit = () => {
        if(!form.username){
            ElMessage.warning('请输入账号~')
            return
        }else if(!form.password){
            ElMessage.warning('请输入密码~')
            return
        }

        btnLoading = true
        // zzLogin(form).then(res => {
        //     btnLoading = false
        //     if(res.success){
                ElMessage.success('登录成功~')
                // localStorage.SDRS_TOKEN = res.result.token
                localStorage.SDRS_TOKEN = '666'
                router.push('/')
        //     }else{
        //         ElMessage.error(res.message)
        //     }
        // })
    }


</script>

<template>
    <div class="login-main">
        <div class="top-title flex-center">
            峄城区古邵镇城乡公益岗管理平台
        </div>

        <div class="login-content flex-center">
            <img class="left-img" src="../assets/images/login/login-left.png">
            <div class="right-login-box">
                <div class="login-title">用户登录</div>
                <div class="login-form-warp">
                    <div class="input-item">
                        <i class="username-icon"></i>
                        <input type="text" v-model="form.username" placeholder="请输入账号">
                    </div>
                    <div class="input-item">
                        <i class="password-icon"></i>
                        <input type="password" v-model="form.password" placeholder="请输入密码">
                    </div>
                </div>

                <div 
                    class="login-btn flex-center"
                    v-loading="btnLoading"
                    @click="submit"
                >登 录</div>

            </div>
        </div>
    </div>
</template>f

<style lang="less" scoped>
    .login-main{
        width: 100%;
        height: 100%;
        background: url('../assets/images/login/login-bg.jpg') center no-repeat;

        .top-title{
            height: 66px;
            margin-top: 56px;
            font-size: 56px;
            font-weight: 800;
            color: transparent;
            line-height: 64px;
            // text-shadow: 0px 5px 0px rgba(5, 63, 152, 0.5);

            background: linear-gradient(0deg, #7edafd 20%, #ffffff 52.197265625%, #7edafd 80%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
        }

        .login-content{
            padding-top: 124px;
            
            .left-img{
                width: 852px;
                height: 589px;
                margin-right: 38px;
            }

            .right-login-box{
                width: 505px;
                height: 464px;
                background: url('../assets/images/login/login-form-bg.png') center no-repeat;
                background-size: 100% 100%;
                padding: 72px 77px 0 67px;

                .login-title{
                    height: 29px;
                    line-height: 29px;
                    font-size: 30px;
                    text-align: center;
                    color: #fff;
                    // font-weight: bold;
                    background: url('../assets/images/login/login-title-bg.png') center no-repeat;
                }

                .login-form-warp{
                    padding: 54px 0;
                }

                .input-item{
                    display: flex;
                    align-items: center;
                    width: 100%;
                    height: 47px;
                    background: url('../assets/images/login/login-input-bg.png') center no-repeat;
                    background-size: 100% 100%;
                    padding: 0 24px;

                    &:first-child{
                        margin-bottom: 30px;
                    }
                    
                    
                    i{
                        width: 30px;
                        height: 28px;

                        &.username-icon{
                            background: url('../assets/images/login/username-icon.png') center no-repeat;
                        }

                        &.password-icon{
                            background: url('../assets/images/login/password-icon.png') center no-repeat;
                        }
                    }

                    input{
                        flex: 1;
                        height: 45px;
                        color: #fff;
                        font-size: 18px;
                        margin-left: 14px;

                        &::-webkit-input-placeholder { /* WebKit, Blink, Edge */
                            color: #C2D8E8;
                            font-size: 16px;
                        }
                    }
                }

                .login-btn{
                    width: 100%;
                    height: 50px;
                    background: url('../assets/images/login/login-btn-bg.png') center no-repeat;
                    font-size: 20px;
                    font-weight: bold;
                    cursor: pointer;
                }
            }
        }
    }
</style>